<template>
<div>
    <div class="hearder">
      <div class="search">
        <input type="text"  placeholder="输入订单id.." v-model="searchText">
        <div style="width: 10px;height: 50px;"></div>
        <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      </div>
      <div class="add"  @click="page" id="getAll">
        <div><i class="el-icon-shopping-cart-2"></i></div>
        <div style="width: 5px;height: 50px;" ></div>
        所有
      </div>
    </div>
  <div class="table">
    <el-table
        :data="dataList"
        style="width: 100%;">
      <el-table-column
          prop="orderId"
          header-align="center"
          align="center"
          width="50"
          label="id">
      </el-table-column>
      <el-table-column
          prop="userName"
          header-align="center"
          align="center"
          width="100"
          label="支付账号">
      </el-table-column>
      <el-table-column
          prop="orderStatus"
          header-align="center"
          align="center"
          width="200"
          label="订单状态">
        <template slot-scope="scope">
          <el-tag type="info" style="line-height: 25px" v-if="scope.row.orderStatus == 0">代发货</el-tag>
          <el-tag type="primary" style="line-height: 25px" v-if="scope.row.orderStatus == 1">已发货</el-tag>
          <el-tag type="success" style="line-height: 25px" v-if="scope.row.orderStatus == 2">已签收</el-tag>
          <el-tag type="warning" style="line-height: 25px" v-if="scope.row.orderStatus == 3">用户申请退订</el-tag>
          <el-tag type="success" style="line-height: 25px" v-if="scope.row.orderStatus == 4">已退单</el-tag>
          <el-tag type="danger" style="line-height: 25px" v-if="scope.row.orderStatus == 5">退订失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="cartId"
          header-align="center"
          align="center"
          label="购买方式">
        <template slot-scope="scope">
          <el-tag type="success" style="line-height: 25px" v-if="scope.row.cartId == 0">立即购买</el-tag>
          <el-tag type="danger" style="line-height: 25px" v-if="scope.row.cartId != 0">购物车</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="shipName"
          header-align="center"
          align="center"
          width="200"
          label="收货人">
      </el-table-column>
      <el-table-column
          prop="shipLocation"
          header-align="center"
          align="center"
          width="300"
          label="收货地址">
      </el-table-column>
      <el-table-column
          prop="shipMobail"
          header-align="center"
          align="center"
          width="200"
          label="收货电话">
      </el-table-column>
      <el-table-column
          prop="shopTitle"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip='true'
          label="商品标题">
      </el-table-column>
      <el-table-column
          prop="shopStore"
          header-align="center"
          align="center"

          :show-overflow-tooltip='true'
          label="店铺">
      </el-table-column>
      <el-table-column
          prop="shopBrand"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip='true'
          label="品牌">
      </el-table-column>
      <el-table-column
          prop="shopType"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip='true'
          label="商品类型">
      </el-table-column>
      <el-table-column
          prop="shopStyle"
          header-align="center"
          align="center"
          width="150"
          :show-overflow-tooltip='true'
          label="样式">
      </el-table-column>
      <el-table-column
          prop="shopSize"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip='true'
          label="型号">
      </el-table-column>
      <el-table-column
          prop="spuId"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip='true'
          label="spuId">
      </el-table-column>
      <el-table-column
          prop="num"
          header-align="center"
          align="center"
          :show-overflow-tooltip='true'
          label="数量">
      </el-table-column>
      <el-table-column
          prop="price"
          header-align="center"
          align="center"
          label="价格">
      </el-table-column>
      <el-table-column
          prop="shipTime"
          header-align="center"
          align="center"
          width="200"
          :show-overflow-tooltip='true'
          label="下单时间">
      </el-table-column>

      <el-table-column
          prop="shopImage"
          header-align="center"
          align="center"
          label="商品图片">
        <template slot-scope="scope" >
          　<img :src="scope.row.shopImage" width="40" height="40" v-if="scope.row.shopImage!=null"/>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="230"
          label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="ship(scope.row.orderId)" v-if="scope.row.orderStatus == 0">发货</el-button>
          <el-button type="primary" size="small" @click="openUnsubscribe(scope.row)" v-if="scope.row.orderStatus == 3">退订申请审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[7,15,20,30,50,200]"
          :page-size='pageSize'
          layout="total, sizes, prev, pager, next, jumper"
          :total='total'>
      </el-pagination>
    </div>
  </div>
<div style="line-height: 0">
  <el-dialog
      title="退订审核"
      :visible.sync="unsubscribeDialog"
      width="30%"
  >
    <p>用户：<span style="color:#52f52c;">{{userName}}</span> 已提交退订申请，商品类型：<span style="color:#03aeff;">{{shopType}}</span></p>
    <p style="text-align: center">
      <img :src="image" style="width: 70px;height: 70px;border-radius: 7px">
    </p>
    <p v-if="chooseText!=null" style="color:#d03333;">{{chooseText}}</p>
    <p>
      <select v-model="chooseText">
        <option></option>
        <option v-for="item in chooseList">{{item}}</option>
      </select>
    </p>
    <span slot="footer" class="dialog-footer">
    <el-button type="danger" @click="unsubscribeAudit(1)">拒 绝</el-button>
    <el-button type="success" @click="unsubscribeAudit(0)">通 过</el-button>
  </span>
  </el-dialog>
</div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》'

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
  dataList:[],
  pageNum:1,
  pageSize:7,
  total:0,
  id:null,
  image:null,
  userName:null,
  shopType:null,
  unsubscribeDialog:false,
  chooseList:["虚拟商品不支持退换","影响商品二次出售","商品有使用痕迹","已经售出概不退换","超过7天，商家拒绝"],
  chooseText:null,
  searchText:null
};
},
//计算属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  page(){
    this.$http({
      url: "order/page",
      method: 'post',
      data:this.$http.adornData({
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      })
    }).then((res)=>{
      // console.log(res.data)
      this.dataList = res.data.list
      this.total = res.data.page.totalCount


    })
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.page()
  },
  handleCurrentChange(val) {
    this.pageNum = val
    this.page()
  },
  ship(id){
    this.$http({
      url:"order/ship/add",
      method:'post',
      data:{
        orderId: id,
        userId:sessionStorage.getItem("userId")
      }
    }).then((res)=>{
      this.page()
    })
  },
  openUnsubscribe(item){
    console.log(item)
    this.id = item.orderId
    this.image = item.shopImage
    this.userName = item.userName
    this.shopType = item.shopType
    this.unsubscribeDialog = true
  },
  unsubscribeAudit(status){
    if (status==0){
      //通过
      this.$http({
        url:"order/audit",
        method:"post",
        data:{
          orderId:this.id,
          status:status,
          userId:sessionStorage.getItem("userId")
        }
      }).then((res)=>{
        if (res.data.code){
          this.unsubscribeDialog = false
        }
        this.page()
      })
    }
    if (status==1){
      if (this.chooseText==null|this.chooseText=="拒绝操作必须选择理由"){
        this.chooseText="拒绝操作必须选择理由"
      }
      if (this.chooseText!="拒绝操作必须选择理由"|this.chooseText!=null){
        this.$http({
          url:"order/audit",
          method:"post",
          data:{
            orderId:this.id,
            status:status,
            userId:sessionStorage.getItem("userId"),
            remark:this.chooseText
          }
        }).then((res)=>{
          if (res.data.code){
            this.unsubscribeDialog = false
          }
          this.page()
        })
      }

    }

    this.chooseText = null

  },
  search(){
    this.$http({
      url: "order/search",
      method: "post",
      data:{
        userName:this.searchText,
        pageSize:this.pageSize,
        pageNum:this.pageNum
      }
    }).then((res)=>{
     if (res.data.code==0){
       this.dataList = res.data.list
       this.total = res.data.page.totalCount
       this.searchText == null
     }

    })
  }
},
//声明周期 - 创建完成（可以访问当前this实例）
created() {
  this.page()
},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>

.table{
  line-height: 0;
}
.hearder{
  line-height: 0;
  display: flex;
  width: 100%;
  height: 90px;
  /*background-color: #FBAB7E;*/
}

.search{
  display: flex;
  margin: 25px;
  width: 350px;
  height: 50px;
  /*background-color: red;*/
}
.search>input{
  width: 200px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 10px;
  color: #99A3A4;
  font-size: 17px;
  border: 1px solid #409eff;
  outline-color: #48dd68;
}
.add{
  display: flex;
  margin-top: 25px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100px;
  border-radius: 5px;
  color: #ffffff;
  font-size: 16px;
  background-color: #48dd68;
}
.add>div{
  width: 35px;
  height: 50px;
  text-align: right;
  line-height: 50px;
}
#getAll:active{
  background-color: #3498DB;
}
#getAll:hover{
  background-color: #F7DC6F;
}
</style>
